import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { StyleSheet, View } from 'react-native'

import * as Utils from '../utils/utils'

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
  },
})

export default class Line extends Component {
  // static defaultProps = {
  //     lineWidth: 1,
  // }

  static propTypes = {
    color: PropTypes.string.isRequired,
    lineWidth: PropTypes.number,
    start: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }).isRequired,
    end: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }).isRequired,
  }

  // 构造
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {}
  }

  render() {
    const transform = Utils.getLineTransform(this.props.start, this.props.end)

    return (
      <View
        style={[
          styles.container,
          {
            backgroundColor: this.props.color,
            width: transform.distance,
            height: this.props.lineWidth,
            left: this.props.start.x,
            top: this.props.start.y - this.props.lineWidth / 2,
            transform: [
              { translateX: transform.translateX },
              { translateY: transform.translateY },
              { rotateZ: transform.rotateRad + 'rad' },
            ],
          },
        ]}
      />
    )
  }
}
